<template>
	<view class="r_content">
		<view class="login_box">
			<view class="form_box">
				<view class="input_box">
					<text class="txt1">{{paySetType === 'set'?'设置密码':'设置新密码'}}</text>
					<!-- #ifndef MP-ALIPAY -->
					<input :type="showPassword?'text':'password'" placeholder-class="account-txt" v-model="params.password" maxlength="6" class="uni-input" placeholder="请输入6位数字的密码" />
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<input v-if="showPassword" type="text" placeholder-class="account-txt" v-model="params.password" maxlength="6" class="uni-input" placeholder="请输入6位数字的密码" />
					<input v-if="!showPassword" password placeholder-class="account-txt" v-model="params.password" maxlength="6" class="uni-input" placeholder="请输入6位数字的密码" />
					<!-- #endif -->
					<image @click="showPass" :src="showPassword ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" style="width: 18px;height: 18px;"></image>
				</view>
			</view>
			<view class="form_box">
				<view class="input_box">
					<text class="txt1">再次输入</text>
					<!-- #ifndef MP-ALIPAY -->
					<input :type="showPassword1?'text':'password'" placeholder-class="account-txt" v-model="params.rePass" maxlength="6" class="uni-input" placeholder="请输入6位数字的密码" />
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<input v-if="showPassword1" type="text" placeholder-class="account-txt" v-model="params.rePass" maxlength="6" class="uni-input" placeholder="请输入6位数字的密码" />
					<input v-if="!showPassword1" password placeholder-class="account-txt" v-model="params.rePass" maxlength="6" class="uni-input" placeholder="请输入6位数字的密码" />
					<!-- #endif -->
					<image @click="showPass1" :src="showPassword1 ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" style="width: 18px;height: 18px;"></image>
				</view>
			</view>
			<view class="form_box">
				<view class="input_box" style="width: calc(100% - 224rpx);">
					<text class="txt1">手机号</text>
					<input type="text" :disabled="params.mobileNo!==''" placeholder-class="account-txt" v-model="params.mobileNo" class="uni-input" placeholder="请输入您的手机号码" />
				</view>
				<view class="register_yzms" :class="{'register_disabled': disabled}" @click="getCode" :disabled="disabled">
			 		{{countdown}} <text v-if="timestatus">秒重获</text>
				</view>
			</view>
			<view class="form_box">
				<view class="input_box">
					<text class="txt1">验证码</text>
					<input type="number" placeholder-class="account-txt" v-model="params.smsCode" class="uni-input" placeholder="请输入短信验证码" />
				</view>
			</view>
			
			<view class="save_btn">
				<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="toQue">{{paySetType === 'set'?'确认':'确认重置'}}</button>
			</view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()' :okBtn='okBtn'></mcModal>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @cancel="cancel" @ok='queren'></tmcModal>
	</view>
</template>

<script>
	import {payPwd, sendSmsCode} from '../../common/api/index.js'
	import {_showLoading, _showToast} from '../../common/js/util.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	export default {
		data() {
			return {
				params: {
					mobileNo: '',
					password: '',
					rePass: '',
					smsCode: ''
				},
				numberCode: 60,
				disabled: false,
				countdown:'获取验证码',
				timestatus:false,
				showPassword: false,
				showPassword1: false,
				paySetType: 'set',
				content: '',
				title: '',
				showMcModal: false,
				content1: '',
				title1: '',
				showMcModal1: false,
				okBtn: ''
			}
		},
		components: {
			tmcModal,
			mcModal
		},
		onLoad(option) {
			this.params.mobileNo = uni.getStorageSync('s_mobile')
			this.paySetType = option.type
			// this.getCode()
			if(this.paySetType == 'set') {
				uni.setNavigationBarTitle({
				    title: '支付密码设置'
				});
			} else if(this.paySetType == 'reset') {
				uni.setNavigationBarTitle({
				    title: '支付密码重置'
				});
			}
		},
		methods: {
			showTxt(title, content) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
			},
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				uni.switchTab({
					url: '/pages/me/me'
				})
			},
			cancel() {
				this.showMcModal1 = false
			},
			queren() {
				this.showMcModal1 = false
			},
			toQue() {
				if(this.params.mobileNo == '') {
					this.showTxt('温馨提示', '请填写手机号')
				} else if(this.params.smsCode == '') {
					this.showTxt('温馨提示', '请填写手机验证码')
				} else if (this.params.password == '') {
					this.showTxt('温馨提示', '请填写重置密码')
				} else if (this.params.rePass == '') {
					this.showTxt('温馨提示', '请填写确认密码')
				} else if (this.params.password != this.params.rePass) {
					this.showTxt('温馨提示', '两次输入的密码不一致')
				} else {
					_showLoading('设置中,请稍后…')
					payPwd({
						mobileNo: this.params.mobileNo,
						smsCode: this.params.smsCode,
						newPayPwd: this.params.password
					}).then(res => {
						if(res.code == 0) {
							uni.hideLoading()
							this.title = '温馨提示'
							this.content = '您的密码重置成功'
							this.okBtn = '确认'
							this.showMcModal = true
						} else {
							uni.hideLoading()
							this.showTxt('温馨提示', res.msg)
						}
					}).catch(err => {
						this.showTxt('温馨提示', '系统错误!')
					})
				}
			},
			showPass() {
				this.showPassword = !this.showPassword;
			},
			showPass1() {
				this.showPassword1 = !this.showPassword1;
			},
			getCode() {
				var that = this;
				if(this.disabled){
					return
				}
				if(that.params.mobileNo==''){
		            _showToast('请输入手机号码')
				} else {
					uni.showLoading();
					that.disabled = true; //禁用点击
					sendSmsCode({
						mobileNo: this.params.mobileNo
					}).then(res => {
						if(res.resultCode == 0) {
							uni.hideLoading()
							_showToast('获取验证码成功')
							that.countdown = 60;
			                that.timestatus = true;
			                that.clear = setInterval(that.countDown,1000);
						} else {
							uni.hideLoading()
							_showToast('获取验证码失败')
							that.disabled = false;
						}
					}).catch(err => {
						this.showTxt('温馨提示', '系统错误!')
						that.disabled = false;
					})
				}
			},
			countDown() {
				var that = this;
				if(!that.countdown){
					that.disabled = false;
		            that.timestatus = false;
		            that.countdown = '获取验证码';
		            clearInterval(that.clear);
				} else {
					--that.countdown;
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background-color: #FFF;
	}
	.r_content {
		display: flex;
		justify-content: center;
	}
	.login_box {
		width: 89%;
		margin-top: 50rpx;
	}
	.account-txt {
		font-size: 24rpx;
	}
	.txt1 {
		color: rgb(74, 74, 74);
		font-weight: 500;
		width: 150rpx;
		font-size: 28rpx;
	}
	.btn_pri {
		width: 566rpx;
		height: 96rpx;
		background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
		box-shadow: 0 16rpx 32rpx 0 rgba(36, 98, 255, 0.24);
		border-radius: 9rpx;
		margin-top: 50rpx;
	}
	.uni-input {
		display: flex;
		flex: 1;
		border: none;
		padding: 10rpx;
	}
	.form_box {
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.input_box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 88rpx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1rpx solid #E6E6E6;	
		padding: 22rpx;
		line-height: 88rpx;
		box-sizing: border-box;
	}
	.register_yzm {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border: 1px solid red;
	}
	.register_yzms {
		width: 200rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		text-align: center;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #185AFF;
		color: #185AFF;
	}
	.register_yzms.register_disabled{
		border: 1px solid #f6f6f6;
		color: #999;
	}
	.input_yzm {
		width: 290rpx;
		padding: 10rpx;
	}
	.yzm {
		width: 190rpx;
		height: 50rpx;
	}
	.save_btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
